<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8" />
		<title>展示</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"/>
		<style>
            #message, .message {
                position: fixed;
                top: 100px;
                left: 47%;
                width: 220px;
                margin-left: -100px;
                border-width:0;
                border-radius: 0.6em;
                color:#ffffff;
                background-color: #2c2c2c ;
                box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
                padding: 10px;
                text-align:center;
                opacity: 1;
                z-index:1500;
                -webkit-transition: opacity 1s ease-out; /* Saf3.2+, Chrome */
                -moz-transition: opacity 1s ease-out; /* FF4+ */
                -ms-transition: opacity 1s ease-out; /* IE10? */
                -o-transition: opacity 1s ease-out; /* Opera 10.5+ */
                transition: opacity 1s ease-out;
            }
			
			.float {
				float: right;
			}
		</style>
	</head>

	<body>
    <div id="message" style="display: none;"></div>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="navbar-brand" href="#">旅居</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="http://112.124.107.209:8082/index">信息录入 <span class="sr-only">(current)</span></a>
						</li>
						<li class="active">
							<a href="#">工作汇报 <span class="sr-only">(current)</span></a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right" style="padding-top: 15px;">
						<li>
							<label style="color: whitesmoke;" id="nickName"></label>
						</li>
						<li style="padding-left: 15px;">
							<button class="btn btn-danger btn-sm" style="padding-top: 2px;" onclick="logout()">logout</button>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>


		<table class="table table-hover">
			<thead>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tableBody">

			</tbody>
		</table>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="openWorkInfoList" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="openWorkInfoListLabel">工作汇报列表</h4>
				</div>
				<div class="modal-body" id="workInfoListBody">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
		<nav style="text-align: center">
			<ul class="pagination" id="page"></ul>
		</nav>
	<div style="line-height: 20px;text-align: center">
		<p>Copyright &copy; lory 2018</p>
	</div>
			<!-- /.modal -->
			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script type="text/javascript" src="js/bootstrap.min.js"></script>
			<script type="text/javascript" src="js/main.js"></script>
			<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
            <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-datepicker.zh-CN.js"></script>
		<script type="text/javascript">
			$(function () {
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "http://112.124.107.209:8082/session",//url
                    success: function (result) {
						$("#nickName").text(result.data.nickname);
						var role = result.data.role;
						if (role == 'user'){
							$("#userOutPut").css("display",'');
						}
                    }
                });
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "http://112.124.107.209:8082/user/group/1" ,//url
                    success: function (result) {
						var content = createHtml(result.data.list);
                        $("#tableBody").html(content);
                        var options = {
                            currentPage: result.data.pageNum,
                            totalPages: result.data.lastPage,
                            numberOfPages: result.data.pages,
                            bootstrapMajorVersion:3,
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "首页";
                                    case "prev":
                                        return "上一页";
                                    case "next":
                                        return "下一页";
                                    case "last":
                                        return "末页";
                                    case "page":
                                        return page;
                                }
                            },onPageClicked: function(event, originalEvent, type, page){
                                $.ajax({
                                    //几个参数需要注意一下
                                    type: "GET",//方法类型
                                    dataType: "json",//预期服务器返回的数据类型
                                    url: "http://112.124.107.209:8082/user/group/"+page,//url
									success: function (result) {
                                        $("#tableBody").children().remove();
										var content = createHtml(result.data.list);
                                        $("#tableBody").html(content);
                                    }
								});
                            }

                        };
                        $('#page').bootstrapPaginator(options);
                    },
                    error : function() {
                        alert("异常！");
                    }
                });

            });
			function createHtml(data) {
                var content = '';
                for (var i = 0; i< data.length;i++){
                    content += "<tr><td width='33.3%'>"+data[i].id+"</td><td width='33.3%'>"+data[i].nickname+"</td><td " +
						"width='33.3%'><button class='btn btn-info btn-sm' onclick='openWorkInfoList(this)'>查看详情</button></td></tr>";
                }
                return content;
            }

            function openWorkInfoList(ele) {
				$("#openWorkInfoList").modal('show');
				workInfoList(ele);
            }

            function workInfoList(ele) {
				var id = $(ele).parent().parent().find("td:first").html();workInfoListBody
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "http://112.124.107.209:8082/workInfo/"+id,//url
                    success: function (result) {
						var content = '<table class="table table-hover" id="infoListId">';
						for (var i = 0;i<result.data.length;i++){
						    content += "<tr onclick='workInfoDetail(this)'><td style='display: none'>"+result.data[i].id+"</td><td>"+new Date(result.
								data[i].createTime).toLocaleDateString()+"</td></tr><tr style='display: none'><td colspan='2'><div class='well'>"+result.data[i].content+"</div></td></tr>"
						}
						content += "</table>";
						$("#workInfoListBody").html(content);
                    }
                })
            }
            
            function workInfoDetail(ele) {
			    var status = ($(ele).next().css('display'));
			    if (status == "none"){
                    $(ele).next().css('display','');
				}else {
                    $(ele).next().css('display','none');
				}
            }

            function logout() {
                $.ajax({
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "http://112.124.107.209:8082/oa/logout",//url
                    success: function (result) {
                        console.log(result);
                        if (result.code == 200){
                            window.location.href = "http://112.124.107.209:8082";
                        }
                    }
                });
            }

		</script>
	</body>

</html>